<template>
  <div class="le-matter">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item class="he-link">
        <he-link href="setup/address"> 退货地址 </he-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ form.id ? '编辑地址' : '新建地址' }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="le-line"></el-row>
    <div class="le-form-card">
      <el-form ref="ruleForm" :model="form" label-width="176px" :rules="rules">
        <el-form-item label="收件人姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入收件人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="addressList">
          <el-cascader v-model="form.addressList" :options="district" :props="{ expandTrigger: 'hover' }"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" placeholder="请输入详细地址" v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="le-cardpin">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import district from './../order/components/district.json';

export default {
  name: 'addressPublish',
  data() {
    return {
      district: [],
      form: {
        addressList: [],
        name: '',
        mobile: '',
        address: '',
        id: null
      },
      rules: {
        address: [{ required: true, message: '请输入详细地址信息', trigger: 'blur' }],
        addressList: [{ required: true, message: '请选择收货地址', trigger: 'change' }],
        name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      }
    };
  },
  methods: {
    getList: function (district) {
      for (let i = 0; i < district.length; i++) {
        district[i].label = district[i].name;
        district[i].value = district[i].name;
        if (district[i].list) {
          district[i].children = district[i].list;
          this.getList(district[i].children);
        }
      }
    },
    save() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let data = this.form;
          data.province = this.form.addressList[0];
          data.city = this.form.addressList[1];
          data.district = this.form.addressList[2];
          if (data.id) {
            this.$heshop
              .address('put', parseInt(data.id), data)
              .then(() => {
                this.$router.back();
              })
              .catch(err => {
                this.$message.error(err.data[0].message);
              });
          } else {
            this.$heshop
              .address('post', data)
              .then(() => {
                this.$router.back();
              })
              .catch(err => {
                this.$message.error(err.data[0].message);
              });
          }
        } else {
          return false;
        }
      });
    },
    getDetail: function (id) {
      this.$heshop
        .address('get', id)
        .then(res => {
          this.getList(district);
          this.district = district;
          this.$set(this.form.addressList, 0, res.province);
          this.$set(this.form.addressList, 1, res.city);
          this.$set(this.form.addressList, 2, res.district);
          this.form.name = res.name;
          this.form.mobile = res.mobile;
          this.form.id = res.id;
          this.form.address = res.address;
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    }
  },
  mounted() {
    let id = this.$getQueryVariable('id');
    if (id) {
      this.getDetail(parseInt(id));
    } else {
      this.getList(district);
      this.district = district;
    }
  }
};
</script>

<style scoped lang="scss">
.le-form-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
}
/deep/ .el-textarea {
  width: 280px;
  .el-textarea__inner {
    width: 280px;
    resize: none;
    height: 100px;
  }
}
</style>
